function ReModel({
  title = "弹窗",
  content = "",
  size = ["auto", "auto"],
  btnText = ["取消", "确定"],
  close,
  confim,
  render,
  iframe,
  node = document.body
}) {
  // 弹窗结构 
  const ReModelHtml = () => `
  <div class="re-modal-content">
    <div class="re-modal-header">
      <div class="re-modal-title">
        <span>${title}</span>
      </div>
      <div class="icon-box">
        <i class="iconfont icon-off close-Icon"></i>
      </div>
    </div>
    <div class="re-modal-body" style="width:${size[0]};height:${size[1]};">${content}</div>
    <div class="re-modal-footer">
      <button class="re-close re-btn mini antd-radius">${btnText[0]}</button>
      <button class="re-confim re-btn mini primary antd-radius">${btnText[1]}</button>
    </div>
  </div>
`;

  // 创建 Model 元素
  const $reModel = document.createElement("div");
  // 赋值类名
  $reModel.className = "re-model";
  // 判断是否 iframe 层
  content = iframe ?
    `<iframe src="${content}" style="width:100%;height:100%;border:none;margin:0;padding:0;"></iframe>` :
    content;
  // 将结构赋值给 Model
  $reModel.innerHTML = ReModelHtml();

  // 弹窗出现方法
  function fadeIn() {
    $reModel.style.display = "block";
    document.addEventListener("mousemove", documentMousemove);
    document.addEventListener("mouseup", documentMouseup);
    setTimeout(() => {
      $reModel.style.opacity = 1;
    });
  }

  // 弹窗消失方法
  function fadeOut() {
    $reModel.style.opacity = 0;
    setTimeout(() => {
      $reModel.remove();
      document.removeEventListener("mousemove", documentMousemove);
      document.removeEventListener("mouseup", documentMouseup);
    }, 300);
  }

  let isDragging = false;
  let initialX;
  let initialY;
  let lastX;
  let lastY;
  let $reModalContent;

  // 鼠标移动时拖拽元素
  function documentMousemove(event) {
    if (isDragging) {
      const deltaX = event.clientX - lastX;
      const deltaY = event.clientY - lastY;
      const newLeft = $reModalContent.offsetLeft + deltaX;
      const newTop = $reModalContent.offsetTop + deltaY;
      $reModalContent.style.left = `${newLeft}px`;
      $reModalContent.style.top = `${newTop}px`;
      lastX = event.clientX;
      lastY = event.clientY;
    }
  }

  // 鼠标松开时停止拖拽
  function documentMouseup() {
    isDragging = false;
  }

  return function Model() {
    // 将元素插入到页面节点
    node.append($reModel);
    // 插入之后回调事件 返回 dom
    render && render($reModel);

    // 弹窗显示
    fadeIn();

    // 点击事件
    $reModel.addEventListener("click", function (e) {
      if (
        e.target.className.includes("re-model") ||
        e.target.className.includes("close-Icon") ||
        e.target.className.includes("re-close")
      ) { // 关闭弹窗
        close && close($reModel); // 关闭之前回调事件 返回 dom
        fadeOut();
      } else if (e.target.className.includes("re-confim")) { // 点击确认
        confim && confim(fadeOut, $reModel); // 点击确认回调事件 返回 事件 和 dom
      }
    });

    // 鼠标按下时开始拖拽
    $reModel.addEventListener("mousedown", function (event) {
      if (event.target.className.includes("re-modal-header")) {
        $reModalContent = event.target.parentElement;
        isDragging = true;
        initialX = event.clientX - $reModalContent.offsetLeft;
        initialY = event.clientY - $reModalContent.offsetTop;
        lastX = event.clientX;
        lastY = event.clientY;
      }
    });

    return $reModel;
  }();
}